<template>
    <Card>
        <p slot="title" class="card-title">
            <Icon type="person-stalker"></Icon>
            <span>查询</span>
        </p>
        <template>
            <Row>
                <Col span="24">
                <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  style="flex: 0 0 100%" inline>
                    <Col span="8">
                    <Form-item label="客户姓名" prop="trueOrFalse">
                        <Input v-model="dataInfo.name" placeholder="" style="width: 200px"/>
                    </Form-item>
                    </Col>



                    <Col span="8">
                    <Form-item label="审批状态" prop="state" style="width: 200px">
                        <Select v-model="dataInfo.signState"  style="width: 200px">
                            <Option value="1">拒绝</Option>
                            <Option value="2">通过</Option>
                            <Option value="3">未审核</Option>
                        </Select>
                    </Form-item>
                    </Col>

                    <Col span="8">
                    <Form-item label="选择时间" prop="请选择时间" style="width: 200px">
                        <DatePicker type="daterange" :options="options2"  v-model="optionsData"confirm placement="bottom-end" @on-ok="handleOk(optionsData)" placeholder="请选择时间" style="width: 200px"></DatePicker>

                    </Form-item>
                    </Col>

                    <Col span="8">
                    <Form-item label="状态" prop="productCode" style="width: 200px">
                        <Select v-model="dataInfo.state"  style="width: 200px">
                            <Option value="1">禁用</Option>
                            <Option value="2">启用</Option>
                        </Select>
                    </Form-item>
                    </Col>
                </Form>
                </Col>
                <div style="margin-top: 2rem;text-align: center">
                    <Button type="primary" icon="ios-search" @click="doGetDetail" style="margin-right: 8px">搜索</Button>
                    <Button type="primary"  @click="addWhite" style="margin-right: 8px">添加</Button>
                </div>
            </Row>

            <div style="margin-top: 2rem;text-align: center">
                <Table ref="table"  class="margin-bottom-10" :columns="columns"
                       :border="setting.showBorder" :data="data.content" style="margin-top: 1.5rem">
                </Table>
                <Page :total="data.totalElements" class="tr" @on-change="pageChange":current.sync="dataFilter.current" :page-size="data.size"
                      @on-page-size-change="pageSizeChange" show-elevator show-sizer>
                </Page>
            </div>

        </template>

        <Modal v-model="addWhiteModel" draggable scrollable title="添加白名单"  @on-ok="okAdd()">
            <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  >
                <Form-item label="用户姓名" prop="trueOrFalse">
                    <Input v-model="formInfo.uname" placeholder="用户姓名" />
                </Form-item>

                <Form-item label="用户身份证号" prop="trueOrFalse">
                    <Input v-model="formInfo.uid" placeholder="用户身份证号" />
                </Form-item>


                <Form-item label="手机号" prop="phone">
                    <Input v-model="formInfo.phone" placeholder="手机号" />
                </Form-item>


                <!--<Form-item label="金额" prop="amount">-->
                    <!--<Input v-model="formInfo.amount" placeholder="金额" />-->
                <!--</Form-item>-->


                <Form-item label="扣款期限" prop="amount">
                    <Select v-model="formInfo.uDeadline"  >
                        <Option value="3">3月</Option>
                        <Option value="6">6月</Option>
                        <Option value="12">12月</Option>
                        <Option value="18">18月</Option>
                        <Option value="24">24月</Option>
                        <Option value="36">36月</Option>
                        <Option value="48">48月</Option>
                        <Option value="60">60月</Option>
                    </Select>
                </Form-item>



                <Form-item label="商户选择" prop="amount">
                    <Select v-model="formInfo.mname">
                        <Option v-for="item in mnameList" :value="item.mId" :key="item.mId">{{ item.mName }}</Option>
                    </Select>
                </Form-item>

                <Form-item label="用户银行卡号" prop="trueOrFalse">
                    <Input v-model="formInfo.ucard" placeholder="用户银行卡号" />
                </Form-item>

                <Form-item label="银行" prop="trueOrFalse">
                    <Input v-model="formInfo.bankName" placeholder="银行" />
                </Form-item>

                <Form-item label="状态" prop="productCode" >
                    <Select v-model="formInfo.ustate"  >
                        <Option value="1">禁止</Option>
                        <Option value="2">启用</Option>
                    </Select>
                </Form-item>

                <Form-item label="白名单属性" prop="productCode" >
                    <Select v-model="formInfo.property"  >
                        <Option value="1" >商户</Option>
                        <Option value="2">用户</Option>
                    </Select>
                </Form-item>
                <Form-item label="添加时间" prop="请选择时间" >
                    <DatePicker type="date" show-week-numbers  v-model="formInfo.signTime" placeholder="请选择时间" style="width: 387px"></DatePicker>
                </Form-item>
            </Form>
        </Modal>

        <Modal v-model="updateWhiteModel" draggable scrollable title="编辑白名单"  @on-ok="ok()">
            <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  >
                <Form-item label="用户姓名" prop="trueOrFalse">
                    <Input v-model="formInfoup.uname" placeholder="用户姓名" />
                </Form-item>

                <Form-item label="用户身份证号" prop="trueOrFalse">
                    <Input v-model="formInfoup.uid" placeholder="用户身份证号" />
                </Form-item>


                <Form-item label="手机号" prop="phone">
                    <Input v-model="formInfoup.phone" placeholder="手机号" />
                </Form-item>


                <Form-item label="金额" prop="amount">
                    <Input v-model="formInfoup.amount" placeholder="金额" />
                </Form-item>

                <Form-item label="用户银行卡号" prop="trueOrFalse">
                    <Input v-model="formInfoup.ucard" placeholder="用户银行卡号" />
                </Form-item>

                <Form-item label="银行" prop="trueOrFalse">
                    <Input v-model="formInfoup.bankName" placeholder="银行" />
                </Form-item>

                <!--<Form-item label="状态" prop="productCode" >-->
                <!--<Select v-model="formInfo.ustate"  >-->
                <!--<Option value="2" >全部</Option>-->
                <!--<Option value="0">禁用</Option>-->
                <!--<Option value="1">启用</Option>-->
                <!--</Select>-->
                <!--</Form-item>-->

                <Form-item label="白名单属性" prop="productCode" >
                    <Select v-model="formInfo.property"  >
                        <Option value="1" >商户</Option>
                        <Option value="2">用户</Option>
                    </Select>
                </Form-item>
                <Form-item label="添加时间" prop="请选择时间" >
                    <DatePicker type="date" show-week-numbers  v-model="formInfo.createTime" placeholder="请选择时间" style="width: 387px"></DatePicker>
                </Form-item>
            </Form>
        </Modal>

        <Modal v-model="monyModel" draggable scrollable title="扣款金额"  @on-ok="monOK">
            <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  >

                <Form-item label="请输入扣款金额" prop="amount">
                    <Input v-model="formInfoupAmount" placeholder="请输入扣款金额" />
                </Form-item>

            </Form>
        </Modal>


        <Modal v-model="monyModelFs" draggable scrollable title="扣款金额"  @on-ok="monOKFs">
            <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  >

                <Form-item label="请输入扣款金额" prop="amount">
                    <Input v-model="formInfoupAmount" placeholder="请输入扣款金额" />
                </Form-item>

            </Form>
        </Modal>

        <Modal v-model="detailWhiteModel" draggable scrollable title="编辑白名单"  @on-ok="shutOpen">
            <Form ref="search_info" class="search-info" :label-width="100" :model="search_info"  >
                <Form-item label="用户姓名" prop="trueOrFalse">
                    <Input v-model="formInfoup.uname"  disabled placeholder="用户姓名" />
                </Form-item>

                <Form-item label="用户身份证号" prop="trueOrFalse">
                    <Input v-model="formInfoup.uid" disabled placeholder="用户身份证号" />
                </Form-item>


                <Form-item label="手机号" prop="phone">
                    <Input v-model="formInfoup.phone" disabled placeholder="手机号" />
                </Form-item>


                <Form-item label="金额" prop="amount">
                    <Input v-model="formInfoup.amount" disabled placeholder="金额" />
                </Form-item>

                <Form-item label="用户银行卡号" prop="trueOrFalse">
                    <Input v-model="formInfoup.ucard" disabled placeholder="用户银行卡号" />
                </Form-item>

                <Form-item label="银行" prop="trueOrFalse">
                    <Input v-model="formInfoup.bankName" disabled placeholder="银行" />
                </Form-item>

                <!--<Form-item label="状态" prop="productCode" >-->
                <!--<Select v-model="formInfo.ustate"  >-->
                <!--<Option value="2" >全部</Option>-->
                <!--<Option value="0">禁用</Option>-->
                <!--<Option value="1">启用</Option>-->
                <!--</Select>-->
                <!--</Form-item>-->

                <Form-item label="白名单属性" prop="productCode" >
                    <Select disabled v-model="formInfo.property"  >
                        <Option value="1" >商户</Option>
                        <Option value="2">用户</Option>
                    </Select>
                </Form-item>
                <Form-item label="添加时间" prop="请选择时间" >
                    <DatePicker disabled type="date" show-week-numbers  v-model="formInfo.createTime" placeholder="请选择时间" style="width: 387px"></DatePicker>
                </Form-item>
            </Form>
        </Modal>

    </Card>
</template>

<script>
    import {post,get} from '../../libs/axios-cfg';
    import moment from 'moment'
    export default {
        name: "index",
        data () {
            return {
                mnameList: [],
                monyModel: false,
                monyModelFs: false,
                addWhiteModel: false,
                updateWhiteModel: false,
                detailWhiteModel: false,
                tOrF_list: [],
                optionsData: '',
                search_info: {
                    state: '',
                    name: '',
                    status: '',
                    productCode: ''
                },
                dataFilter: {
                    page: 0,
                    size: 10
                },
                formInfoupAmount: '',
                formInfo: {
                     mname: '',
                     phone: '',
                     amount: '',
                     uname:"",
                     uid :"",
                     ucard:"",
                     bankName:"",
                     createTime: moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss'),                    // signTime:"",
                     ustate: '',
                     property:'',
                     uDeadline: '',
                     signState:'3'
                },
                setting: {
                    loading: true,
                    showBorder: true
                },
                formInfoup: {
                    uname:"",
                    uid :"",
                    phone: '',
                    amount: '',
                    ucard:"",
                    bankName:"",
                    createTime:moment(new Date()).format('YYYY年MM月DD日 HH:mm:ss'),
                    // signTime:"",
                    // ustate: '',
                    property:'',
                    mid: "",
                    signState:'1'
                },
                dataInfo: {
                    endTime: '',
                    startTime: '',
                    signState: '',
                    name: '',
                    state: ''
                },
                itemObj:{},
                options2: {
                    shortcuts: [
                        {
                            text: '本周',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        },
                        {
                            text: '本月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        },
                        {
                            text: '最近3月',
                            value () {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                return [start, end];
                            },
                            onClick: (picker) => {
                                console.log("picker"+picker)
                                debugger
                            }
                        }
                    ]
                },
                columns: [
                    // {
                    //     type: 'selection',
                    //     align: 'center',
                    //     width: 60,
                    //     align: 'center'
                    // },
                    {
                        title: '姓名',
                        align: 'center',
                        key: 'uname'
                    },
                    {
                        title: '所属商户',
                        align: 'center',
                        key: 'bankName'
                    },
                    {
                        title: '金额',
                        align: 'center',
                        key: 'amount'
                    },
                    {
                        title: '手机号',
                        align: 'center',
                        key: 'phone'
                    },
                    {
                        title: '创建日期',
                        width: 200,
                        key: 'signState',
                        render:(h,params)=>{
                            return h('span',moment(params.row.signTime).format('YYYY年MM月DD日 HH:mm:ss'))
                        },

                    },
                    {
                        title: '审核状态',
                        key: 'signState',
                        // render: (h, params) => {
                        //   //  return h ('span',{},params.row.signState == 1 ? '拒绝' : '通过')
                        //
                        //     if(params.row.signState === '1'){
                        //         return h("div", {}, params.row.signState =  '拒绝');
                        //
                        //     }else if(params.row.signState === '2'){
                        //         return h("div",{}, params.row.signState = '通过' );
                        //     }else{
                        //         return h("div", {},params.row.signState = '未审核' );
                        //     }
                        //
                        // }
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render:(h,params)=>{
                            return h('span',
                                {
                                    style: {color: params.row.userStatus == 1 ? 'green' : 'red'
                                    }
                                }, params.row.ustate == 1 ? '禁用' : '启用')
                        },

                    },

                    {
                        title: '操作',
                        align: 'center',
                        width: 370,
                        key: 'enable',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.delete(params.row);
                                        }
                                    }

                                }, '删除'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                           this.update(params.row);
                                        }
                                    }

                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.payMountSave(params.row);
                                        }
                                    }

                                }, '足额扣款'),
                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.payMountFasle(params.row);
                                        }
                                    }

                                }, '非足额扣款'),


                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.ban(params.row);
                                        }
                                    }

                                }, '禁用'),

                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.enable(params.row);
                                        }
                                    }

                                }, '启用'),


                                h('Button', {
                                    props: {
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px',
                                        color: '#ffffff',
                                        backgroundColor: '#87b87f'
                                    },
                                    on: {
                                        click: () => {
                                            this.detail(params.row);
                                        }
                                    }

                                }, '查看详情'),
                            ]);
                        }
                    },
                ],
                data: []
            }
        },
        mounted () {
            this.getWriteDataList()
            this.getMnameList ()
        },
        methods : {
            async getMnameList () {
              try {
                  let res = await get ('/merchant/nameList')
                  this.mnameList = res.data
              }  catch (e){
                  this.$throw(e)
              }
            },
           async ban (obj) { // 禁止
                try{
                    let res  = await get('/white/lock/'+obj.id+'/1')
                    this.$Message.success(res.msg)
                    this.getWriteDataList()
                }catch (e){
                    this.$throw(e)
                }
            },
           async enable (obj) { // 启用
               try{
                   let res  = await get('/white/lock/'+obj.id+'/2')
                   this.$Message.success(res.msg)
                   this.getWriteDataList()
               }catch (e){
                   this.$throw(e)
               }
            },
            update (obj) {
                this.formInfoup =  obj
                this.updataId = obj.id
                this.updateWhiteModel = true
            },
            async okAdd () {
                try {
                    let res = await post ('/white/save',Object.assign(this.formInfo,{mid:this.formInfo.mname}))
                    this.$Message.success(res.msg)
                    this.addWhiteModel = false
                    this.getWriteDataList()

                }catch (e){
                    this.$throw(e)
                }
            },
            async ok(){
                try {
                    let res = await post ('/white/save',this.formInfoup)
                    this.$Message.success(res.msg)
                    this.addWhiteModel = false
                    this.getWriteDataList()

                }catch (e){
                    this.$throw(e)
                }

            },
            detail (obj) {
                this.formInfoup =  obj
                this.detailWhiteModel = true
            },
            shutOpen () {
               this.detailWhiteModel = false
            },
           async getWriteDataList () {
             try {
                 let res = await post ('/white/query/list',{
                      endTime: this.dataInfo.endTime,
                      page: this.dataFilter.page,
                      size: this.dataFilter.size,
                      name: this.dataInfo.name,
                      state: this.dataInfo.state,
                      startTime: this.dataInfo.startTime
                 })
                 this.data = res.data
             }catch (e){
                 this.$throw(e)
             }
            },
            async delete(obj) {
                try{
                    let res = await get ('/white/delete/'+obj.id)
                    this.$Message.success(res.msg)
                    this.getWriteDataList()
                } catch (e){
                    this.$throw(e)
                }
            },
            doGetDetail () {
                this.getWriteDataList()
            },
            onOk () {
               console.log('asdads')
            },
            addWhite () {
               this.addWhiteModel = true
            },
          async monOKFs () {
              let obj = this.itemObj
                try {
                    let res = await post('/withhold/payment',{
                        uname: obj.uname,
                        uid: obj.uid,
                        ucard: obj.ucard,
                        wtype:1,
                        mid: obj.mid,
                        amount: this.formInfoupAmount,
                        uphone: obj.phone,
                        // underAmountId:1
                    })
                    this.$Message.success(res.data)
                    this.getWriteDataList ()
                    this.formInfoupAmount = ''
                }catch (e){
                    this.$throw(e)
                }
            },
           async monOK () {
               let obj = this.itemObj
                try {
                    let res = await post('/withhold/payment',{
                        uname: obj.uname,
                        uid: obj.uid,
                        mid: obj.mid,
                        ucard: obj.ucard,
                        wtype:1,
                        amount: this.formInfoupAmount,
                        uphone: obj.phone,
                        underAmountId:1
                    })
                    this.$Message.success(res.data)
                    this.getWriteDataList ()
                    this.formInfoupAmount = ''
                }catch (e){
                    this.$throw(e)
                }
            },
            async payMountFasle (obj) {
                this.itemObj = obj
                this.monyModelFs = true
            },
           async payMountSave(obj) {
               this.itemObj = obj
               this.monyModel = true
            },
            handleOk (picker) {
                this.dataInfo.startTime = moment(picker[0]).format('YYYY-MM-DD')
                this.dataInfo.endTime = moment(picker[1]).format('YYYY-MM-DD')

            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            pageChange(p) {
                this.dataFilter.page = p;
                this.getWriteDataList();
            },
            pageSizeChange(p) {
                this.dataFilter.size = p;
                this.getWriteDataList();
            },
        }
    }
</script>

<style scoped>

</style>
